<template>
    <div>
        <Header :title="t('home.Mine.help')">
            <template #left>
                <van-icon name="arrow-left" color="#fff" size="25px" class="icon-left" @click="goBack()" />
            </template>
        </Header>
        <main>
            <ul>
                <li v-for="(item, index) in helpList" :key="item.id">
                    <div class="q box">
                        <div class="icon">Q</div>
                        <span>{{ item.question }}</span>
                    </div>
                    <div class="a box">
                        <div class="icon">A</div>
                        <span>{{ item.answer }}</span>
                    </div>
                </li>
            </ul>
        </main>
    </div>
</template>

<script setup>
import Header from "@/components/Header/index.vue";
import useLanguage from '@/hooks/useLanguage';
import { useRouter } from 'vue-router'
import { publicApi } from '@/api'
import { ref, onMounted, reactive } from 'vue'
const router = useRouter()
const { t } = useLanguage()
function goBack() {
    router.go(-1)
}

const helpList = ref([
    {
        id: 1,
        question: t('help.question1'),
        answer: t('help.answer1')
    },
    {
        id: 2,
        question: t('help.question2'),
        answer: t('help.answer2')
    },
])


const postData = reactive({
    pageNum: 1,
    pageSize: 10
})


async function getHelpList() {
    const { code, data } = await publicApi.getHelpList(postData)
    if (code == 20000) {
        console.log(data);
    }
}

onMounted(() => {
    getHelpList()
})

</script>

<style lang="less" scoped>
.icon-left {
    margin-left: 10px;
}

main {

    li {
        margin: 5px 10px 15px;
        background-color: #F5F5F5;

        .box {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;

            span {
                margin-top: 10px;
                margin-left: 7px;
                margin-bottom: 10px;
                font-size: 14px;
                color: #000;
            }

            div {
                margin-top: 10px;
                margin-left: 10px;
                padding: 0px 2px;
                font-size: 18px;
                box-sizing: border-box;
                font-weight: 600;
            }
        }

        .q {
            .icon {
                color: #fff;
                background-color: #2196F3;
            }
        }

        .a {
            .icon {
                color: #fff;
                background-color: #F44336;
            }
        }
    }
}
</style>